<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>

    <title>在线预约</title>

    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>
    <script src="/js/vue.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/data/options.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <style>
        input {
            outline: none;
            border: none;
            height: 20px;
            line-height: 20px;
        }

        input::-webkit-input-placeholder {
            font-size: 14px;
            font-size: 14 px
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        #app {
            /* 将 flex-grow 设置为1，该元素会占用全部可使用空间
               而其他元素该属性值为0，因此不会得到多余的空间*/
            /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .footer {
            /* 和 header 一样，footer 也采用固定高度*/
            /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
            flex: 0 0 auto;
        }

        .appointment_item_list {
            display: flex;
            flex-direction: column;
            flex: 1 0 auto;

        }

        .appointment_item {
            display: flex;
            padding: 10px 7px;
            margin: 0 15px;
            border-bottom: 1px solid #c0c0c0;
            font-size: 16px;
            font-size: 16 px;
        }

        .appointment_item_title {
            flex: 23;
        }

        .appointment_item_content {
            flex: 65;
            color: #888888;
        }

        .appointment_item_operate {
            flex: 12;
        }

        .appointment_item_operate a {
            color: #1876ce;
        }

        .appointment_picker {
            display: flex;
            flex-direction: column;
            padding: 15px;
            margin: 0 15px;
        }

        .appointment_picker_title {
            color: #1876ce;
        }

        .appointment_picker_item_list {
            display: flex;
            flex-direction: column;
        }

        .appointment_picker_item {
            display: flex;
            flex-direction: column;
            padding: 15px;
            margin: 10px 0;
            border: 2px solid #1876ce;
            border-radius: 5px;
        }

        .appointment_picker_item_title {
            width: 100%;
            color: #1876ce;
            font-size: 16px;
            font-size: 16 px;
        }

        .appointment_picker_item_content {
            width: 100%;
            color: #666666;
            font-size: 14px;
            font-size: 14 px;
        }

        .appointment_calendar {
            display: flex;
            flex-direction: column;
        }

        .appointment_calendar_month {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 10px 10px 0;
        }

        .appointment_calendar_week {
            display: flex;
            flex-direction: row;
            padding: 0 10px;
            flex-wrap: wrap;
            border-bottom: 2px solid rgba(24, 118, 206, 0.5);
        }

        .appointment_calendar_weekday {
            margin: 10px 1%;
            width: 12%;
            text-align: center;
        }

        .appointment_calendar_day_list {
            display: flex;
            flex-direction: row;
            padding: 5px;
            flex-wrap: wrap;
        }

        .appointment_calendar_blank {
            margin: 10px 1%;
            width: 12%;
            text-align: center;
        }

        .appointment_calendar_working {
            background-color: #1876ce;
            color: white;
            margin: 10px 1%;
            width: 12%;
            text-align: center;
        }

        .appointment_calendar_holiday {
            background-color: #c0c0c0;
            color: #999999;
            margin: 10px 1%;
            width: 12%;
            text-align: center;
        }

        .arrow_right_blue {
            background: transparent url("/images/right_blue.png");
            background-size: 100%;
            width: 20px;
            height: 20px;
        }

        .arrow_right_gray {
            background: transparent url("/images/right_gray.png");
            background-size: 100%;
            width: 20px;
            height: 20px;
        }

        .arrow_left_blue {
            background: transparent url("/images/left_blue.png");
            background-size: 100%;
            width: 20px;
            height: 20px;
        }

        .arrow_left_gray {
            background: transparent url("/images/left_gray.png");
            background-size: 100%;
            width: 20px;
            height: 20px;
        }

        .appointment_picker_time_list {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
        }

        .time_picker {
            color: #1876ce;
            border: 2px solid #1876ce;
            border-radius: 3px;
            width: 40%;
            margin: 8px 4%;
            text-align: center;
            display: flex;
            flex-direction: column;
        }

        .time_picker .time {
            width: 100%;
            color: #1876ce;
            font-size: 16px;
            font-size: 16 px;
        }

        .time_picker .time_disabled {
            display: none;
        }

        .time_amount {
            color: #999999;

            font-size: 12px;
            font-size: 12 px;
        }

        .time_picker_disabled {
            color: #999999;
            border: 2px solid #999999;
            border-radius: 4px;
            width: 40%;
            margin: 8px 4%;
            text-align: center;
            display: flex;
            flex-direction: column;
        }

        .time_picker_disabled .time {
            color: #999999;
            font-size: 16px;
            font-size: 16 px;
        }
        .time_disabled{

            font-size: 12px;
            font-size: 12 px;
        }

        .time_picker_disabled .time_amount {
            display: none;
        }


    </style>
    <script th:utext="${params}">

    </script>
</head>
<body>
<div id="app">
    <div class="appointment_item_list">
        <div th:if="${apply != null}">
            <input type="hidden" id="applyId" th:value="${apply.applyId}"/>
            <input type="hidden" id="realName" th:value="${apply.realName}"/>
            <input type="hidden" id="idNumber" th:value="${apply.idNumber}"/>
            <input type="hidden" id="phoneNumber" th:value="${apply.phoneNumber}"/>
            <input type="hidden" id="serviceType" th:value="${apply.applySummary}"/>

            <div class="appointment_item">
                    <span class="appointment_item_title">
                        姓名
                    </span>
                <span class="appointment_item_content" th:text="${apply.realName}"></span>
                <span class="appointment_item_operate"></span>
            </div>

            <div class="appointment_item">
                    <span class="appointment_item_title">
                        证件号码
                    </span>
                <span class="appointment_item_content" th:text="${apply.idNumber}"></span>
                <span class="appointment_item_operate"></span>
            </div>
            <div class="appointment_item">
                    <span class="appointment_item_title">
                        手机号码
                    </span>
                <span class="appointment_item_content" th:text="${apply.phoneNumber}"></span>
                <span class="appointment_item_operate"></span>
            </div>
            <div class="appointment_item">
                    <span class="appointment_item_title">
                        办理业务
                    </span>
                <span class="appointment_item_content">{{serviceName}}</span>
                <span class="appointment_item_operate"></span>
            </div>
        </div>

        <div th:if="${apply == null}">
            <div class="appointment_item">
                    <span class="appointment_item_title">
                        姓名
                    </span>
                <span class="appointment_item_content">
                        <input v-model="form.realName" value="" placeholder="请输入预约人姓名"
                               style="color: #666666;width: 100%"/>
                    </span>
                <span class="appointment_item_operate">
                    </span>
            </div>

            <div class="appointment_item">
                <span class="appointment_item_title">
                    证件号码
                </span>
                <span class="appointment_item_content">
                        <input v-model="form.idNumber" value="" placeholder="请输入预约人证件号码"
                               style="color: #666666;width: 100%"/>
                    </span>
                <span class="appointment_item_operate"></span>
            </div>

            <div class="appointment_item">
                <span class="appointment_item_title">
                    手机号码
                </span>
                <span class="appointment_item_content">
                        <input v-model="form.phoneNumber" placeholder="请输入预约人手机号码" style="color: #666666;width: 100%"/>
                    </span>
                <span class="appointment_item_operate"></span>
            </div>
            <div :class="{hidden_div:beforeStep1}">
                <div class="appointment_item">
                    <span class="appointment_item_title">
                        办理业务
                    </span>
                    <span class="appointment_item_content">{{serviceName}}</span>
                    <span class="appointment_item_operate"><a :class="{hidden_div:onStep1}" v-on:click="modifyItem(1)">修改</a></span>
                </div>
                <div :class="{hidden_div:1>step}">
                    <div class="appointment_picker">
                        <div class="appointment_picker_title">
                            请选择您要办理的业务:
                        </div>
                        <div class="appointment_picker_item_list">
                            <a class="appointment_picker_item" v-on:click="chooseServiceType('A')">
                                <span class="appointment_picker_item_title">公民业务</span>
                                <span class="appointment_picker_item_content">普通护照、往来港澳通行证、往来台湾通行证</span>
                            </a>
                            <a class="appointment_picker_item" v-on:click="chooseServiceType('B')">
                                <span class="appointment_picker_item_title">境外业务</span>
                                <span class="appointment_picker_item_content">签证证件办理、台湾居民回大陆定居</span>
                            </a>
                            <a class="appointment_picker_item" v-on:click="chooseServiceType('C')">
                                <span class="appointment_picker_item_title">综合业务</span>
                                <span class="appointment_picker_item_content">国家工作人员备案、中介机构、商务备案、
                                <br/>出入境记录查询、境e通业务、其他涉外业务</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div :class="{hidden_div:2>step}">
            <div class="appointment_item">
                    <span class="appointment_item_title">
                        办理地点
                    </span>
                <span class="appointment_item_content">{{hallName}}</span>
                <span class="appointment_item_operate"><a :class="{hidden_div:onStep2}"
                                                          v-on:click="modifyItem(2)">修改</a></span>
            </div>
            <div :class="{hidden_div:afterStep2}">

                <div class="appointment_picker">
                    <div class="appointment_picker_title">
                        请选择您要预约办理的地点:
                    </div>
                    <div class="appointment_picker_item_list">
                        <a v-for="hall in hallList" class="appointment_picker_item" v-on:click="chooseHall(hall.id)">
                            <span class="appointment_picker_item_title">{{hall.hallName}}</span>
                            <span class="appointment_picker_item_content">{{hall.address}}</span>
                        </a>


                    </div>
                </div>
            </div>
        </div>

        <div :class="{hidden_div:3>step}">
            <div class="appointment_item">
                    <span class="appointment_item_title">
                        预约日期
                    </span>
                <span class="appointment_item_content">{{dayName}}</span>
                <span class="appointment_item_operate"><a :class="{hidden_div:onStep3}"
                                                          v-on:click="modifyItem(3)">修改</a></span>
            </div>
            <div :class="{hidden_div:afterStep3}">
                <div class="appointment_picker">
                    <div class="appointment_picker_title">
                        请选择您要预约办理的日期:
                    </div>
                    <div v-for="month in monthList" :class="{hidden_div:month.monthId!=monthId}">
                        <div class="appointment_calendar">
                            <div class="appointment_calendar_month">
                                <a v-on:click="showPrevMonth"
                                   :class="month.hasPrev?'arrow_left_blue':'arrow_left_gray'"></a>
                                <span>{{month.monthName}}</span>
                                <a v-on:click="showNextMonth"
                                   :class="month.hasNext?'arrow_right_blue':'arrow_right_gray'"></a>
                            </div>
                            <div class="appointment_calendar_week">
                                <span class="appointment_calendar_weekday">一</span>
                                <span class="appointment_calendar_weekday">二</span>
                                <span class="appointment_calendar_weekday">三</span>
                                <span class="appointment_calendar_weekday">四</span>
                                <span class="appointment_calendar_weekday">五</span>
                                <span class="appointment_calendar_weekday">六</span>
                                <span class="appointment_calendar_weekday">日</span>
                            </div>
                            <div class="appointment_calendar_day_list">
                                <div v-for="b in month.blankDayList" class="appointment_calendar_blank">

                                </div>
                                <div v-for="day in month.dayList" v-on:click="chooseDay(day.dayId,day.dayName,day)"
                                     :class="day.appFlag?'appointment_calendar_working':'appointment_calendar_holiday'">
                                    {{day.day}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div :class="{hidden_div:4>step}">
            <div class="appointment_item">
                    <span class="appointment_item_title">
                        预约时段
                    </span>
                <span class="appointment_item_content">{{timeName}}</span>
                <span class="appointment_item_operate"><a :class="{hidden_div:onStep4}"
                                                          v-on:click="modifyItem(4)">修改</a></span>
            </div>
            <div :class="{hidden_div:afterStep4}">
                <div class="appointment_picker">
                    <div class="appointment_picker_title">
                        请选择您要预约办理的时段:
                    </div>
                    <div class="appointment_picker_time_list">

                        <div v-on:click="chooseTime(0)" :class="timeList[0]>0?'time_picker':'time_picker_disabled'">
                            <span class="time">09:00 - 10:00</span>
                            <span class="time_amount">可预约数({{timeList[0]}}人)</span>
                            <span class="time_disabled">不可预约</span>
                        </div>
                        <div v-on:click="chooseTime(1)" :class="timeList[1]>0?'time_picker':'time_picker_disabled'">
                            <span class="time">10:30 - 11:30</span>
                            <span class="time_amount">可预约数({{timeList[1]}}人)</span>
                            <span class="time_disabled">不可预约</span>
                        </div>

                        <div v-on:click="chooseTime(2)" :class="timeList[2]>0?'time_picker':'time_picker_disabled'">
                            <span class="time">14:00 - 15:00</span>
                            <span class="time_amount">可预约数({{timeList[2]}}人)</span>
                            <span class="time_disabled">不可预约</span>
                        </div>
                        <div v-on:click="chooseTime(3)" :class="timeList[3]>0?'time_picker':'time_picker_disabled'">
                            <span class="time">15:30 - 16:30</span>
                            <span class="time_amount">可预约数({{timeList[3]}}人)</span>
                            <span class="time_disabled">不可预约</span>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="footer">
        <div :class="{hidden_div:5>step}">
            <div class="button_area">
                <a class="weui-btn weui-btn_primary" v-on:click="submit">提 交 预 约</a>
            </div>
        </div>

    </div>

</div>

<div class="js_dialog" id="iosDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd" id="dialogContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="/applyList" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>
<script src="/js/addAppointment.js"></script>


</body>
</html>